<!-- <template>
  <div>
    <Header></Header>
    <div class="container">
      <div class="bg" style="width: 1300px;">
        <div class="warpper">
          <div style="cursor: pointer;" @click="check(131)">众茶国际供应商入驻协议-查看</div>
          <div style="margin-left: 20px; cursor: pointer;" @click="check(146)">众茶国际采购商入驻协议-查看</div>
        </div>
        <el-dialog title="协议" width='1000px' :visible.sync="dialogVisible" center>
          <div class="content" v-html="remark"></div>
        </el-dialog>
        
        <el-link href="https://image.utea88.com/documents/%E4%BC%97%E8%8C%B6%E5%9B%BD%E9%99%85%E4%BE%9B%E5%BA%94%E5%95%86%E5%85%A5%E9%A9%BB%E5%8D%8F%E8%AE%AE.pdf" 
          type="primary" download="众茶国际供应商入驻协议.pdf">
          众茶国际供应商入驻协议-下载
        </el-link>
        <el-link style="margin-left: 20px;" href="https://image.utea88.com/documents/%E4%BC%97%E8%8C%B6%E5%9B%BD%E9%99%85%E5%B9%B3%E5%8F%B0%E9%87%87%E8%B4%AD%E5%95%86%E5%8D%8F%E8%AE%AE.pdf" 
          type="primary" download="众茶国际采购商入驻协议.pdf">
          众茶国际采购商入驻协议-下载
        </el-link>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template> -->
<template>
	<div class="bg">
		<Header></Header>
		<div class="banner_bg">
			<img class="" src="https://image.utea88.com/statics/pc_cooperation_banner_2.png" alt="">
		</div>
		<div class="wrapper_bg">
			<div class="content_bg">
				<div class="img_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_icon_1.png" alt="">
				</div>
				<div class="title">供应商入驻协议</div>
        <div class="btn_bg">
          <el-button type="primary" @click="check(131)">查看协议</el-button>
          <el-button type="success" @click="downloadFile(1)">下载协议</el-button>
        </div>
				<div class="arrow_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_arrow.png" alt="">
				</div>
				<div class="click">CLICK UP</div>
			</div>
			<div class="content_bg">
				<div class="img_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_icon_2.png" alt="">
				</div>
				<div class="title">采购商入驻协议</div>
        <div class="btn_bg">
          <el-button type="primary" @click="check(146)">查看协议</el-button>
          <el-button type="success" @click="downloadFile(2)">下载协议</el-button>
        </div>
				<div class="arrow_bg">
					<img src="https://image.utea88.com/statics/pc_cooperation_arrow.png" alt="">
				</div>
				<div class="click">CLICK UP</div>
			</div>
		</div>

    <el-dialog title="协议" width='1000px' :visible.sync="dialogVisible" center>
      <div class="content" v-html="remark"></div>
    </el-dialog>
		<Footer></Footer>
	</div>
</template>

<script>
import Header from "@/views/front/components/Header";
import Footer from "@/views/front/components/Footer";
import { getAggreement } from "@/api/front-home";

export default {
  name: 'agreement',
  props: {},
  components: {
    Header,
		Footer
  },
  data() {
    return {
      remark: '',
      dialogVisible: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    check(id) {
      getAggreement({id: id}).then(res => {
        this.remark = res.remark || '';
        this.dialogVisible = true
      })
    },
    downloadFile(type) {
      var url = ''
      if (type == 1) {
        url = "https://image.utea88.com/documents/%E4%BC%97%E8%8C%B6%E5%9B%BD%E9%99%85%E4%BE%9B%E5%BA%94%E5%95%86%E5%85%A5%E9%A9%BB%E5%8D%8F%E8%AE%AE.pdf"
      } else {
        url = "https://image.utea88.com/documents/%E4%BC%97%E8%8C%B6%E5%9B%BD%E9%99%85%E5%B9%B3%E5%8F%B0%E9%87%87%E8%B4%AD%E5%95%86%E5%8D%8F%E8%AE%AE.pdf"
      }
      window.open(url, '_blank');
    }
  },
  created() {
    
  },
  mounted() {
    
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
}
</script>

<style lang='scss' scoped>
  .bg {
		background: rgb(244, 247, 250);
	}

	.banner_bg {
		position: relative;
		width: 100%;

    img {
      width: 100%;
      height: 100%;
    }
  }

	.wrapper_bg {
		margin: 50px 0;
		display: flex;
		justify-content: center;

		.content_bg {
			margin-left: 65px;
			width: 390px;
			height: 500px;
			background: white;
			cursor: pointer;

			&:nth-child(1) {
				margin-left: 0;
			}

			.img_bg {
				margin-top: 42px;
				display: flex;
				justify-content: center;
			}

			.title {
				margin-top: 41px;
				width: 100%;
				height: 42px;
				opacity: 1;
				/** 文本1 */
				font-size: 32px;
				font-weight: 700;
				letter-spacing: 0px;
				line-height: 42px;
				color: rgba(14, 131, 192, 1);
				text-align: center;
			}

			.btn_bg {
				margin-top: 45px;
        display: flex;
		    justify-content: center;
			}

			.arrow_bg {
				margin-top: 42px;
				display: flex;
				justify-content: center;
			}

			.click {
				margin-top: 16px;
				width: 100%;
				height: 20px;
				opacity: 0.9;
				/** 文本1 */
				font-size: 20px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 20px;
				color: rgba(204, 204, 204, 1);
				text-align: center;
				vertical-align: middle;

			}
		}
	}
</style>